<template>
  <view class="index" :style="{overflow:'hidden',height:pageHeight}">
    <!-- 搜索 -->
    <search @search="disScroll" />
    <!-- 轮播图 -->
    <view class="slider">
      <swiper
        autoplay
        interval="2000"
        circular
        indicator-dots
        indicator-color="rgba(255,255,255,.6)"
        indicator-active-color="rgba(255,255,255,1)"
      >
        <swiper-item v-for="item in swiper" :key="item.goods_id">
          <navigator :url="'/packone/goods/index?id='+item.goods_id">
            <image :src="item.image_src" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 功能导航 -->
    <view class="navs">
      <navigator
			:url="item.navigator_url?'/pages/category/index':'/packone/list/index?query='+item.name"
			v-for="item in nav"
			:key="item.name"
			:open-type="item.open_type || 'navigate'">
        <image :src="item.image_src" />
      </navigator>
    </view>
    <!-- 栏目楼层 -->
    <view class="floors">
      <!-- 1 第一层遍历，楼层遍历-->
      <view class="floor" v-for="(item,index) in floors" :key="index">
        <!-- title -->
        <view class="ftitle">
          <image :src="item.floor_title.image_src" />
        </view>
        <!-- pics 第二层遍历，图片遍历-->
        <view class="fitem">
          <navigator :url="'/packone/list/index?query=' +it.name"
					v-for="(it,i) in item.product_list" :key="i">
            <image :src="it.image_src" />
          </navigator>
        </view>
      </view>
    </view>
    <!-- 底部提示 -->
    <view class="end">
      <text>我是有底线的！</text>
    </view>
    <!-- 回到顶部 v-show会失效，只有v-if生效-->
    <view v-if="isShowTop" class="goTop icon-top" @click="goTop"></view>
  </view>
</template>

<script>
// 导入组件
import search from "@/components/search";
// import request from '@/utils/request';
export default {
  data() {
    return {
			pageHeight: "auto",
			// 轮播图
			swiper: [],
			// 导航
			nav: [],
			// 楼层
			floors: [],
			// 滚动高度
			scrollTop: 0
    };
	},
	computed: {
		isShowTop() {
			return this.scrollTop > this.wh;
		}
	},
  // 注册组件
  components: {
    search
	},
	// 相当于vue的created
  onLoad() {
		// 获取屏幕高度,同步方法才可以取到，存到this实例上
		this.wh  = uni.getSystemInfoSync().windowHeight / 2;
		this.getSwiperData();
		this.getNavData();
		this.getFloorsData();
	},
	// 下拉刷新的钩子函数
	onPullDownRefresh() {
		console.log('开始下拉刷新...');
		// 通过js的方式触发下拉刷新,不要在onPullDownRefresh()钩子函数里调用js开启，会导致死循环
		// uni.startPullDownRefresh();
		// this.getSwiperData();
		// this.getNavData();
		// this.getFloorsData();

		// Promise.all();串行异步，异步不阻塞，并发执行
		// -批量执行promise方法
		// -执行完返回promise，then拿到批量执行的reslove的结果
		Promise.all([this.getSwiperData(),
		this.getNavData(),
		this.getFloorsData()]).then(res => {
			console.log('数组中的所有promise都执行完了：', res);
			// uni.stopPullDownRefresh(); // 通过js的方式关闭下拉刷新，用户手动下拉刷新会自动关闭
		});
	},
	// 获取页面滚动高度的钩子函数,页面滚动时执行
	onPageScroll(opt) {
		console.log(opt);
		this.scrollTop = opt.scrollTop;
	},
  methods: {
		// 点击回到顶部
		// 1.获取滚动的高度
		// 2.高度大于屏幕高度的一半时，显示回到顶部按钮； 默认隐藏
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
    // 搜索时禁止页面滚动
    disScroll(e) {
      this.pageHeight = e;
		},
		// 获取轮播图数据
		async getSwiperData() {
			// 数组解构，返回的是数组，第一项是错误信息，第二项是数据对象
			let {msg: {status}, data} = await this.request({
				url: '/api/public/v1/home/swiperdata'
			});
			console.log('轮播图swiperdata', data);
			if (status === 200) {
				this.swiper = data;
				return data;
			}
		},
		// 获取导航数据
		async getNavData() {
			let {msg: {status}, data} = await this.request({
				url: '/api/public/v1/home/catitems'
			});
			console.log('导航catitems',data);
			if (status === 200) {
				this.nav = data;
			}
		},
		// 获取楼层数据
		async getFloorsData() {
			let {msg: {status}, data} = await this.request({
				url: '/api/public/v1/home/floordata'
			});
			console.log('楼层floordata',data);
			if (status === 200) {
				this.floors = data;
			}
		}
  }
};
</script>

<style lang="scss">
.index {
  // 轮播
  .slider {
    swiper,
    image {
      width: 750rpx;
      height: 340rpx;
    }
  }
  // 功能导航
  .navs {
    display: flex;
    padding: 30rpx;
    background: #fff;
    justify-content: space-between;
    navigator {
      width: 128rpx;
      height: 140rpx;
    }
  }

  // 栏目楼层
  .floor {
    .ftitle {
      padding-top: 30rpx;
      background: #f4f4f4;
      image {
        width: 750rpx;
        height: 60rpx;
      }
    }
    // pics
    .fitem {
      padding: 20rpx 16rpx 10rpx;
      overflow: hidden;
      navigator {
        float: left;
        width: 193rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
      }
      navigator:nth-child(1) {
        width: 232rpx;
        height: 386rpx;
        margin-left: 0;
      }
      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
        height: 188rpx;
      }
    }
    &:first-child {
      .fitem {
        navigator {
          width: 233rpx;
        }
      }
    }
  }
  .end {
    text-align: center;
    font-size: 24rpx;
    color: #999;
  }
  .goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
}
</style>
